<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery.event.drag - Demos</title>
<style type="text/css" media="screen">
body {
	font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
	color: #002;
	padding: 0;
	margin: 20px;
	}

code {
	display: block;
	background: #F9F9F9;
	border: 1px dashed #ABC;
	font: 12px/16px "Courier New", Courier, monospace;
	padding: 10px;
	margin: 0 0 30px 110px;
	}
.str { color: #00A; }
.kwd { color: #808; }
.com { color: #777; }
.typ { color: #088; }
.lit { color: #800; }
.pun { color: #000; }
.pln { color: #002; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
p {
	margin: 0 0 5px 110px;
	}
.box {
	position: absolute;
	height: 98px;
	width: 98px;
	background: #CCF;
	border: 1px solid #AAD;
	text-align: center;
	font-size: 10px;
	}
.handle {
	cursor: move;
	}
.bar {
	background: #AAD;
	}
.active {
	background-color: #CFC;
	border-color: #ADA;
	}
.active .bar {
	background-color: #ADA;
	}
.point {
	position: absolute;
	height: 4px;
	width: 4px; 
	margin: -2px 0 0 -2px;
	background: #A00;
	}
.section {
	display: none;
	}
h1 {
	border-bottom: 1px solid #CCC;
	text-indent: 110px;
	cursor: pointer;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" type="text/javascript"></script>
<script src="../jquery.event.drag-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// TOGGLE SECTIONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('h1').bind('click',function(){
		$( this ).next('.section')
			.slideToggle();	
		}).eq(0).trigger('click');
// DEMO ONE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('#demo1_box').bind('drag',function( event ){
		$( this ).css({
			top: event.offsetY,
			left: event.offsetX
			});
		});
// DEMO TWO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('#demo2_box')
		.bind('drag',function( event ){
			$( this ).css( event.shiftKey ? {
				top: event.offsetY } : {
				left: event.offsetX
				});
			});
// DEMO THREE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
	$('#demo3_box')
		.bind('drag',function( event ){
			$( this ).css({
				top: Math.round( event.offsetY/20 ) * 20,
				left: Math.round( event.offsetX/20 ) * 20
				});
			});		
// DEMO FOUR ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('#demo4_box')
		.bind('dragstart',function( event ){
			return $(event.target).is('.handle');
			})
		.bind('drag',function( event ){
			$( this ).css({
				top: event.offsetY,
				left: event.offsetX
				});
			});
// DEMO FIVE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('#demo5_box')
		.bind('dragstart',function( event ){
			if ( !$(event.target).is('.handle') ) return false;
			$( this ).addClass('active');
			})
		.bind('drag',function( event ){
			$( this ).css({
				top: event.offsetY,
				left: event.offsetX
				});
			})
		.bind('dragend',function( event ){
			$( this ).removeClass('active');
			});
// DEMO SIX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~			
	$('#demo6_box')
		.bind('dragstart',function( event ){
			if ( !$(event.target).is('.handle') ) return false;
			return $( this ).css('opacity',.5)
				.clone().addClass('active')
				.insertAfter( this );
			})
		.bind('drag',function( event ){
			$( event.dragProxy ).css({
				top: event.offsetY,
				left: event.offsetX
				});
			})
		.bind('dragend',function( event ){
			$( event.dragProxy ).remove();
			$( this ).animate({
				top: event.offsetY,
				left: event.offsetX,
				opacity: 1
				})
			});
// DEMO SEVEN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('#demo7_box')
		.bind('dragstart',function( event ){
			var data = $( this ).data('dragcircle');
			if ( data ) data.$circle.show(); 
			else {
				data = { 
					radius: 200, $circle: $([]),
					halfHeight: $( this ).outerHeight()/2,
					halfWidth: $( this ).outerWidth()/2
					};
				data.centerX = event.offsetX + data.radius + data.halfWidth,
				data.centerY = event.offsetY + data.halfHeight,
				// create divs to highlight the path...
				$.each( new Array(72), function( i, a ){
					angle = Math.PI * ( ( i-36 ) / 36 );
					data.$circle = data.$circle.add( 
						$('<div class="point" />').css({
							top: data.centerY + Math.cos( angle )*data.radius,
							left: data.centerX + Math.sin( angle )*data.radius
							})
						);
					});
				$( this ).after( data.$circle ).data('dragcircle', data );
				}
			})
		.bind('drag',function( event ){
			var data = $( this ).data('dragcircle'),
			angle = Math.atan2( event.pageX - data.centerX, event.pageY - data.centerY );
			$( this ).css({
				top: data.centerY + Math.cos( angle )*data.radius - data.halfHeight,
				left: data.centerX + Math.sin( angle )*data.radius - data.halfWidth
				});
			})
		.bind('dragend',function(){
			$( this ).data('dragcircle').$circle.hide();
			});
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	}); // doc.ready
</script>
</head>
<body>
<h2>Demos / jquery.event.drag-1.2.js / <a href="http://threedubmedia.com/">threedubmedia.com</a></h2>
<p>Click on each heading to toggle sections open and closed.</p>

<h1>1. Basic Drag</h1>
<div class="section">
<div id="demo1_box" class="box handle">
	#demo1_box
	<input type="text" size="10" value="No drag..." />
	<input type="button" value="No drag..." />
	</div>
<p>&laquo; Drag the blue box around the page, by default you cannot begin dragging within ":input" elements.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo1_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>

<h1>2. Axis Drag</h1>
<div class="section">
<div id="demo2_box" class="box handle">#demo2_box</div>
<p>&laquo; Drag the blue box along the x-axis. Hold "shift" to drag along the y-axis.</p>
<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo2_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">shiftKey </span><span class="pun">?</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY </span><span class="pun">}</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>

<h1>3. Grid Drag</h1>
<div class="section">
<div id="demo3_box" class="box handle">#demo3_box</div>
<p>&laquo; Drag the blue box around the page, notice it snaps to a 20 pixel grid.</p>
<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo3_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">round</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">/</span><span class="lit">20</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">round</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX</span><span class="pun">/</span><span class="lit">20</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">20</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>

<h1>4. Handle Drag</h1>
<div class="section">
<div id="demo4_box" class="box">
	<div class="handle bar">.handle</div>
	#demo4_box
	</div>
<p>&laquo; Drag the blue box around the page using the "handle" only.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo4_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span><span class="str">'.handle'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>

<h1>5. Active Drag</h1>
<div class="section">
<div id="demo5_box" class="box">
	<div class="handle bar">.handle</div>
	#demo5_box
	</div>
<p>&laquo; The box turns green while dragging around the page.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo5_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span><span class="str">'.handle'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragend'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>

<h1>6. Proxy Drag</h1>
<div class="section">
<div id="demo6_box" class="box">
	<div class="handle bar">.handle</div>
	#demo6_box
	</div>
<p>&laquo; Drag a copy of the original box, then the orginal box gets animated to the drop location.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo6_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span><span class="str">'.handle'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'opacity'</span><span class="pun">,</span><span class="lit">.5</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">clone</span><span class="pun">().</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">insertAfter</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragend'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">remove</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">animate</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>

<h1>7. Circular Drag</h1>
<div class="section">
<div id="demo7_box" class="box handle">#demo7_box</div>
<p>&laquo; Drag the blue box around the page, it follows the fixed path of a circle.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo7_box'</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> data </span><span class="pun">)</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">$circle</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln"> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span><span class="pln"> $circle</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">([]),</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; halfHeight</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">outerHeight</span><span class="pun">()/</span><span class="lit">2</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; halfWidth</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">outerWidth</span><span class="pun">()/</span><span class="lit">2</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">};</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data</span><span class="pun">.</span><span class="pln">centerX </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX </span><span class="pun">+</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfWidth</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY </span><span class="pun">+</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfHeight</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// create divs to highlight the path...</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Array</span><span class="pun">(</span><span class="lit">72</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> a </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; angle </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> i</span><span class="pun">-</span><span class="lit">36</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">36</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data</span><span class="pun">.</span><span class="pln">$circle </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">$circle</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln"> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="str">'&lt;div class="point" /&gt;'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerX </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">after</span><span class="pun">(</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">$circle </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">,</span><span class="pln"> data </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">),</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; angle </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">pageX </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerX</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">pageY </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfHeight</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerX </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfWidth<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragend'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">).</span><span class="pln">$circle</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span>
</code>
</div>
</body>
</html>
